<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Custom Tile Overlay</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./resources/tileoverlay_uncompressed.js"></script>
<script type="text/javascript">
/*
 * This example uses a custom tile overlay class which includes features such as opacity.
 * This example used api from http://search.missouristate.edu/map/mobile/examples/
 */  
    function initialize() {
        var myOptions = {
            zoom: 12,
            center: new google.maps.LatLng(13.75055703,100.52318573),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var Overlay  = new missouristate.web.TileOverlay(
            function(x, y, z) { return   "http://athena.traffy.in.th/apis/apitraffy.php?format=png&api=getTile&key=AibgZsBJdV&appid=00001368&x=" + x + "&y=" + y + "&z=" + z ; },
            {
                'map': map, // optional. google.maps.Map reference.
                'visible': true, //optional. boolean. controls initial display of the layer.
                'minZoom': 1, // optional. minimum zoom level at which the tile layer will display.
                'maxZoom': 19, //optional. maximum zoom level at which the tile layer will display.
                'mapTypes': [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID], //optional. If present, tiles will only be drawn when the map type matches
                'percentOpacity': 65 //optional. Initial opacity percentage of the overlay.
            }
        );
    }
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

</html>